<template>
	<view class="">
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header_slot flex justify-start align-center" @click="closePage()">
					<view class="flex justify-between align-center" style="width: 100%;">
						<view class="action">
						</view>
						<view class="content text-bold">
							选择区域
						</view>
						<view class="action">
						</view>
					</view>
				</view>
			</template>
		</headerSlot>
		<!-- <view class="flex justify-start align-center top-search">
			<view style="width: 20%;">
				<uni-data-select emptyTips='选择城市' :clear='false' v-model="value" :localdata="range"
					@change="change"></uni-data-select>
			</view>
			<view style="width: 80%;">
				<uni-search-bar placeholder="搜索小区" bgColor="#EEEEEE" @confirm="search" />
			</view>
		</view> -->
		<view class="card_box ">
			<view class="cu-card case" @click="dialogToggle('warn',item)" v-for="item in areaList">
				<view class="cu-item shadow" style="margin: 0;">
					<view class="card_img">
						<image :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="card_title">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="重新选择" confirmText="确认选择" title="温馨提示"
				content="选择小区之后需要提交工单才能更换,请谨慎选择" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import config from '@/config/config';
	import {
		getUserInfo
	} from "@/api/members";
	import {
		getAreaList,
		updateUserArea
	} from "@/api/connect.js";
	import storage from "@/utils/storage.js";
	export default {
		components: {
			headerSlot,
		},
		data() {
			return {
				msgType: 'success',
				config,
				areaId: '',
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				searchValue: '',
				value: 0,
				areaList: [],
				range: [{
						value: 1,
						text: "广州"
					},
					{
						value: 2,
						text: "深圳"
					},
				],
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				getAreaList().then(res => {
					this.areaList = res.data.data
				})
			},

			dialogToggle(type, item) {
				this.areaId = item._id
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogClose() {
				this.areaId = ''
			},
			dialogConfirm() {

				updateUserArea(this.areaId).then(res => {
					getUserInfo().then(result => {
						storage.setUserInfo(result.data.data);
						storage.setHasLogin(true);
						this.$router.redirectTo({
							url: '/pages/tabBar/home'
						})
					})



				})
			},
			search() {

			},
			// clear() {
			// 	this.searchValue = ''
			// },
			change(e) {
		
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.card_box {
		padding: 24rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;

		.card_img {
			width: 100%;
			height: 220rpx;
		}

		.card_title {
			padding: 24rpx;
			font-weight: 700;
			text-align: center;
		}
	}

	image {
		width: auto;
		height: 100%;
	}

	.top-search {
		padding: 0 32rpx;
	}

	/deep/.uni-searchbar {
		padding-right: 0 !important;
	}
</style>